<template>
  <view>

    <view class="canvas-container">
      <view :animation="animationData" class="canvas-content">
        <canvas style="width: 300px; height: 300px;" class="canvas-element" canvas-id="lotteryCanvas"></canvas>
        <view class="canvas-list" v-for="(item, index) in awardsList" :key="index">
          <view class="canvas-item">
            <text class="canvas-item-text"
              v-bind:style="'-webkit-transform: rotate(' + item.turn + ');transform: rotate(' + item.turn + ')'">{{item.award}}</text>
          </view>
        </view>
      </view>
      <view @click="getLottery" v-bind:class="'canvas-btn ' + btnDisabled">抽奖</view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 抽奖按钮是否可以点击
        btnDisabled: '',
        // 动画队列
        animationData: {},
        // 页面显示奖项列表
        awardsList: [],
        // 奖项配置
        awardsConfig: {
          chance: true,
          awards: [{
              'index': 0,
              'name': '1元红包'
            },
            {
              'index': 1,
              'name': '5元话费'
            },
            {
              'index': 2,
              'name': '6元红包'
            },
            {
              'index': 3,
              'name': '8元红包'
            },
            {
              'index': 4,
              'name': '10元话费'
            },
            {
              'index': 5,
              'name': '10元红包'
            }
          ]
        },
      }
    },
    onReady() {
      var that = this;
      // 绘制转盘
      var len = that.$data.awardsConfig.awards.length;
      var rotateDeg = 360 / len / 2 + 90;
      var html = [];
      var turnNum = 1 / len; // 文字旋转 turn 值
      const ctx = uni.createCanvasContext('lotteryCanvas');
      for (var i = 0; i < len; i++) {
        // 保存当前状态
        ctx.save();
        // 开始一条新路径
        ctx.beginPath();
        // 位移到圆心，下面需要围绕圆心旋转
        ctx.translate(150, 150);
        // 从(0, 0)坐标开始定义一条新的子路径
        ctx.moveTo(0, 0);
        // 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
        ctx.rotate((360 / len * i - rotateDeg) * Math.PI / 180);
        // 绘制圆弧
        ctx.arc(0, 0, 150, 0, 2 * Math.PI / len, false);
        // 颜色间隔
        if (i % 2 == 0) {
          ctx.setFillStyle('#ffb820');
        } else {
          ctx.setFillStyle('#ffcb3f');
        }
        // 填充扇形
        ctx.fill();
        // 绘制边框
        ctx.setLineWidth(0.5);
        ctx.setStrokeStyle('#e4370e');
        ctx.stroke();
        // 恢复前一个状态
        ctx.restore();
        // 奖项列表
        html.push({
          turn: i * turnNum + 'turn',
          award: that.$data.awardsConfig.awards[i].name
        });
      }
      ctx.draw()
      console.log('页面奖项列表--->', JSON.stringify(html))
      that.$data.awardsList = html;
    },
    methods: {
      // 点击抽奖
      getLottery() {
        var that = this
        // 中奖随机数
        var awardIndex = Math.random() * 6 >>> 0;
        // 初始化 rotate
        var animationInit = uni.createAnimation({
          duration: 1
        });
        animationInit.rotate(0).step();
        // 导出动画队列
        this.$data.animationData = animationInit.export();
        // 抽奖按钮变灰
        this.$data.btnDisabled = 'disabled';
        // 旋转抽奖
        setTimeout(() => {
          var animationRun = uni.createAnimation({
            duration: 4000,
            timingFunction: 'ease'
          });
          // 旋转8圈 - 中奖项角度
          animationRun.rotate(360 * 8 - awardIndex * (360 / 6)).step();
          // 导出动画队列
          this.$data.animationData = animationRun.export();
        }, 100);
        // 中奖提示
        setTimeout(() => {
          uni.showModal({
            title: '恭喜',
            content: '获得' + (that.awardsConfig.awards[awardIndex].name),
            showCancel: false
          });
          if (that.awardsConfig.chance) {
            that.$data.btnDisabled = '';
          }
        }, 4100);
        // 打印全局配置
        console.log("中奖结果--->", that.awardsConfig.awards[awardIndex].name);
      }
    }
  }
</script>

<style lang="scss">
  .canvas-container ul,
  .canvas-container li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .canvas-container {
    margin: 0 auto;
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 2px solid #E44025;
    box-shadow: 0 2px 3px #333,
      0 0 2px #000;
  }

  .canvas-content {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background-clip: padding-box;
    background-color: #ffcb3f;
  }

  .canvas-element {
    width: inherit;
    height: inherit;
    border-radius: 50%;
  }

  .canvas-list {
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    z-index: 2;
  }

  .canvas-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #e4370e;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .6);
  }

  .canvas-item-text {
    position: relative;
    display: block;
    padding-top: 20px;
    /* width: 50px; */
    margin: 0 auto;
    text-align: center;
    -webkit-transform-origin: 50% 150px;
    transform-origin: 50% 150px;
  }

  .canvas-btn {
    position: absolute;
    left: 110px;
    top: 110px;
    z-index: 3;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    color: #F4E9CC;
    background-color: #E44025;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .6);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .6);
    text-decoration: none;
  }

  .canvas-btn::after {
    position: absolute;
    display: block;
    content: ' ';
    left: 10px;
    top: -46px;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 30px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #E44025;
  }

  .canvas-btn.disabled {
    pointer-events: none;
    background: #B07A7B;
    color: #ccc;
  }

  .canvas-btn.disabled::after {
    border-bottom-color: #B07A7B;
  }
</style>